import React, { Component } from 'react'
import Logo from '../../components/logo/logo'
import {
    NavBar,
    WingBlank,
    List,
    InputItem,
    WhiteSpace,
    Radio,
    Button,
} from 'antd-mobile'

import { register } from '../../redux/action'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
const ListItem = List.Item



class Register extends Component {
    state = {
        username: '',
        password: '',
        password2: '',
        type: '',
    }
    register = () => {

        this.props.register(this.state)
    }
    handleChange = (name, val) => {
        //更新状态
        //因为这里传的name的字符串，所以要用[]接
        this.setState({
            [name]: val
        })
    }
    //跳转登录
    toLogin = () => {
        this.props.history.push('/login')

    }
    render() {
        const { type } = this.state
        const { msg, redirectTo } = this.props.user
        console.log(redirectTo)
        if (redirectTo) {
            return <Redirect to={redirectTo} />
        }

        return (
            <div>
                <NavBar>广&nbsp;工&nbsp;直&nbsp;聘</NavBar>
                <Logo></Logo>
                <WingBlank>
                    <List>
                        {msg ? <div className="error-msg">{msg}</div> : null}
                        <WhiteSpace />
                        <InputItem placeholder="请输入用户名" onChange={val => { this.handleChange('username', val) }}>用户名:</InputItem>
                        <WhiteSpace />
                        <InputItem placeholder="请输入密码" type="password" onChange={val => { this.handleChange('password', val) }}>密&nbsp;&nbsp;&nbsp;码:</InputItem>
                        <WhiteSpace />
                        <InputItem placeholder="请输入密码" type="password" onChange={val => { this.handleChange('password2', val) }}>确认密码:</InputItem>
                        <WhiteSpace />
                        <ListItem>
                            <span>用户类型:</span>
                            &nbsp;&nbsp;&nbsp;
                            <Radio checked={type === "dashen"} onChange={() => this.handleChange('type', 'dashen')} >大神</Radio>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <Radio checked={type === "laoban"} onChange={() => this.handleChange('type', 'laoban')}>老板</Radio>
                        </ListItem>
                        <WhiteSpace />
                        <Button type="primary" onClick={this.register}>注&nbsp;&nbsp;&nbsp;册</Button>
                        <WhiteSpace />
                        <Button onClick={this.toLogin}>已有账户</Button>
                    </List>
                </WingBlank>
            </div>
        )
    }
}

export default connect(
    state => ({ user: state.user }),
    { register }
)(Register)